<template>
	<view class="margin-bottom-40">
		<linex></linex>
		<view class="comment-top flex flex-between flex-align-items padding-x-20 margin-y-20" style="border-bottom: 1rpx solid #F1F1F1;">
			<view class="pingjia" @tap="toCommentDetail">
				评价 66 
			</view>
			<view @tap="toCommentDetail">
				好评度 100%
				<text class="iconfont icon-you padding-left-20"></text>
			</view>
		</view>
		<view class="padding-x-20 margin-bottom-20" v-for="(item,index) in commentList" :key="index" @tap="toCommentDetail">
			<view class="flex">
				<image  :src="item.heardImage" style="width: 80rpx; height: 80rpx; border-radius: 100%;" mode=""></image>
				<view class="padding-left-20">
					<view>
						{{item.userName}}
						<text class="padding-x-10 main-bg-color margin-left-20 text-color-b border-radius-50rpx font-size-20">VIP{{item.vip}}</text>
					</view>
					<uni-rate :max="5" :size="18" :readonly="true" :value="item.rateValue" ></uni-rate>
				</view>
			</view>
			<view class="content">{{item.content}}</view>
			<scroll-view scroll-x style="width: 100%;">
				<view class="flex">
					<view v-for="(image,ind) in item.imageList" :key="'image'+ind">
						<image class=" padding-x-10" :src="image" style="width: 180rpx; height: 180rpx;" @tap.stop="priveImage(ind,item)" mode=""></image>
					</view>
				</view>
			</scroll-view>
			<view class="text-color-h">{{item.attr}}</view>
		</view>
		<view class="flex flex-align-items justify-content " >
			<text style="padding: 10rpx 30rpx; border: 1rpx solid #999999; border-radius: 50rpx;" @tap="toCommentDetail">查看全部评价</text>
		</view>
	</view>
</template>
<script>
	import uniRate from "../uni-rate/uni-rate.vue"
	export default{
		components:{
			uniRate
		},
		data(){
			return{
				commentList:[
					{
						"heardImage":'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoVUKac3iaI5yV54IDicGhSCMQxD5vaXiaJeysBtv44dYynVhibebdKyxB5qf19FPz3iaTODW0PH9AcY4A/132',
						"userName":"白莉娜",
						"rateValue":5,
						"vip":1,
						"content":"外观大气上档次，声音效果非常不错，拍照效果非常棒，运行速度非，产品很实用，厂家服务态度好外观大气上档次，声音效果非常不错，拍照效果非常棒，运行速度非，产品很实用，厂家服务态度好",
						"imageList":[
							"https://jffy.oss-cn-shanghai.aliyuncs.com/bb91cf26-f05f-4e14-9eac-644f22b6069b.jpg",
							"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg",
							"https://jffy.oss-cn-shanghai.aliyuncs.com/a502c95e-e453-4a23-9ed3-b79e50f43eac.jpg",
							"https://jffy.oss-cn-shanghai.aliyuncs.com/75b3ee08-49a4-4c2a-838d-3d4b2f17b6bc.jpg",
							"https://jffy.oss-cn-shanghai.aliyuncs.com/b13f4148-836a-4edf-adf7-7a803e80f99b.jpg",
							"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg"
						],
						"attr":"陶瓷黑,12G+256G全网通"
						
					},
					{
						"heardImage":'https://thirdwx.qlogo.cn/mmopen/vi_32/NpwmDRHFNmzaSGMA3nC2Xvtcpp4sgEuEqY4dL543Wu0NTBSxgW2e746d2RLZsw5UavicIhwIZRJOiclsic8BIqfPg/132',
						"userName":"吴永杰🌺",
						"rateValue":2,
						"vip":5,
						"content":"外观大气上档次，声音效果非常不错，拍照效果非常棒，运行速度非，产品很实用，厂家服务态度好外观大气上档次，声音效果非常不错，拍照效果非常棒，运行速度非，产品很实用，厂家服务态度好",
						"imageList":[
							"https://jffy.oss-cn-shanghai.aliyuncs.com/b13f4148-836a-4edf-adf7-7a803e80f99b.jpg",
							"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg"
						],
						"attr":"陶瓷黑,12G+256G全网通"
						
					}
				]
			}
		},
		methods:{
			// 预览图片
			priveImage(ind,item){
				uni.previewImage({
					current:ind,
					urls:item.imageList
				})
			},
			toCommentDetail(){
				uni.navigateTo({
					url:"../../pages/comment-detail/comment-detail"
				})
			}
		}
	}
</script>

<style lang="less">
	.pingjia{
		border-left: 8rpx solid #FD6801;
		padding-left: 20rpx;
	}
	// 超出2行显示省略号
	.content{
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;    //将对象作为弹性伸缩盒子模型显示。
		-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。 
	}
	
</style>
